<template>

	<div id="peopledetail">
    <van-nav-bar
      title="个人详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="head">
      <!-- <img :src="peopleDetail.avatar" alt="头像" class="avatar"> -->
      <avatar :username="peopleDetail.name" width="60" />
      <span class="name">{{peopleDetail.name}}</span>
      <div class="prop">
        <span class="propitem">
          {{peopleDetail.age?peopleDetail.age+'岁':'未知年龄'}}|
        </span>
        <span class="propitem">
          {{peopleDetail.liveCity?peopleDetail.liveCity:'未知城市'}}|
        </span>
        <span class="propitem">
          {{peopleDetail.education?peopleDetail.education:'未知教育水平'}}
        </span>
      </div>
    </div>
    <div class="main">
      <div class="sec propose">
        <div class="title"><h4>求职意向</h4></div>
        <div class="content">
          <div class="line">
            <div class="positon my-fl">
              期望职位{{peopleDetail.position}}
            </div>
            <div class="salary my-fr">
              <!-- 12万-15万 -->
            </div>
          </div>
          <div class="line">
            期望行业: {{peopleDetail.area}}
          </div>
          <div class="line">
            期望城市:{{peopleDetail.city}}
          </div>
        </div>
      </div>
      <div class="sec exp">
        <div class="title"><h4>工作经历</h4></div>
        <div class="content">
          <div class="emt" v-if="!peopleDetail.workInfos.length" style="color:#999">
            Opps~ 工作经历暂未添加
          </div>
          <van-steps direction="vertical" :active="-1">
            <van-step v-for="(item,index) in peopleDetail.workInfos" :key="index">
              <h4>{{item.workCompany}}-{{item.workPosition}}<br/>{{item.workBeginDate}}-{{item.workEndDate}}</h4><h6>{{item.workContent}}</h6>

            </van-step>
          </van-steps>
        </div>
      </div>
      <div class="sec">
        <div class="title"><h4>教育经历</h4></div>
          <div class="content">
            <div class="emt" v-if="!peopleDetail.eduInfos.length" style="color:#999">
              Opps~ 教育经历暂未添加
            </div>
            <van-steps direction="vertical" :active="-1">
              <van-step v-for="(item, index) in peopleDetail.eduInfos" :key="index">
                <h4>{{item.eduSchool}}<br />{{item.eduBeginDate}}-{{item.eduEndDate}}</h4>
                <h6>{{item.eduMajor}}</h6>

              </van-step>
            </van-steps>
          </div>
        </div>

    </div>
    <div class="span"></div>
    <van-goods-action style="z-index:999">
      <van-goods-action-mini-btn icon="chat" text="联系伯乐" @click="contact" />
      <van-goods-action-big-btn style="background: #38f" text="下载他的简历" @click="moreInfo" />
    </van-goods-action>
	</div>

</template>
<script scopped>
import Config from './project.config'
import Avatar from 'vue-avatar/src/Avatar'
export default {
  components: {
    Avatar
  },
  data() {
    return {
      peopleDetail: {
        workInfos: '',
        workCompany: '',
        workBeginDate: '',
        workContent: '',
        name: "加载中",
        avatar:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3175633703,3855171020&fm=27&gp=0.jpg",
        age: "52",
        liveCity: "杭州",
        education: "本科",
        workEndDate: '',

      }
    };
  },
  methods: {
    contactBole(){

    },
    moreInfo(){
      this.$router.push(
        {name: 'download',
        query:{
          id : this.peopleDetail.id
        }}
      )
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    contact(){
      this.$router.push({name:'dialog',params:{id: this.peopleDetail.boleId,avatar:null}})
    }
  },
  mounted() {
    this.$store.commit("hideTab");
    console.log("====================================");
    console.log(this.$route.query.id);
    console.log("====================================");
    this.$http.get(Config.baseUrl+'/api/resume/'+this.$route.query.id).then(function(response){
      if(response.data.code == 1){
        this.peopleDetail = response.data.data
      }
    },function(error) {
      console.log(error)
    })
  }
};
</script>
<style lang="stylus" scoped>
.span{
  width 100%
  height: 60px
}
.lev{
  .content{
    .block{
      min-height 1.8rem
      border-bottom  dotted 1px #dddddd
      padding 5px 0
      &:nth-chile(1){
        color #666
      }
    }
  }
}
.propose{
  .line{
    width 100%
    min-height 1.5rem
    color #666
    &:not(:first-child){
      margin-top 8px
    }
    .positon{
      font-size 1.1rem
      color #000
    }
    .salary{
      color #f66
    }
  }
}
.sec{
  h4{
    color #666
    margin 5px 0
  }
  h6{
    color: #999
    margin 5px 0
  }
}
.head {
  color white
  height: 150px;
  background: #8af;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  flex-direction: column;

  .avatar {
    width: 50px;
    height: 50px;
    margin: 5px 0;
    border-radius: 100%;
  }

  .name {
    margin: 5px 0;
    font-size: 1.2rem;
  }

  .prop {
  }
}
.main{
  .sec{
    overflow hidden
    background white
    color #333
    margin-bottom 10px
    .title{
      line-height 1rem
      font-size 1rem
      width 100%
      margin 10px 14px
      border-left solid 3px #38f
      padding 0 5px
    }
    .content{
      border-top  solid 1px #ddd
      margin 8px 12px
      padding 10px 10px
    }
  }
}
.my-fl{
  float left
}
.my-fr{
  float right
}
</style>

